<template>
  <div class="app-container">

    <!-- 基础样式 -->
    <el-card shadow="never" class="mb16">
      <div slot="header">
        <span>基础样式</span>
      </div>
      <el-skeleton :rows="4" animated />
    </el-card>

    <!-- 自定义样式 -->
    <el-card shadow="never">
      <div slot="header">
        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <span>自定义样式</span>
          </el-col>
          <el-col :span="16" class="text-right">
            <el-popover placement="bottom" trigger="click">
              <svg-icon slot="reference" icon-class="xitongguanli" />
              <p class="skeleton-option">设置</p>
              <el-row type="flex">
                <el-col :span="16">
                  <span style="color:#17233D">动画效果</span>
                </el-col>
                <el-col :span="8" :offset="6">
                  <el-switch v-model="isAnimated" @change="setLoading" />
                </el-col>
              </el-row>
            </el-popover>
          </el-col>
        </el-row>
      </div>
      <div class="custom-style">
        <el-skeleton :loading="loading" :animated="isAnimated" :count="3">
          <template #template>
            <el-skeleton-item variant="image" style="width: 367px; height: 245px;" />
            <div style="padding: 14px;">
              <el-skeleton-item variant="text" style="width: 50%;" />
              <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 8px; height: 16px;">
                <el-skeleton-item variant="text" style="margin-right: 16px;" />
              </div>
            </div>
          </template>
          <template #default>
            <el-row :gutter="36">
              <el-col v-for="item in list" :key="item.name" :sm="12" :lg="8">
                <el-card :body-style="{ padding: '0px' }" class="mb24">
                  <el-image :src="item.imgUrl" :preview-src-list="item.previewUrl" style="vertical-align:middle;" />
                  <div class="custom-style-desc">
                    <span>{{ item.name }}</span>
                    <p>{{ item.content }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </template>
        </el-skeleton>
      </div>
    </el-card>

    <!-- 回到顶部 -->
    <el-backtop :right="12" />
  </div>
</template>

<script>
export default {
  name: 'Skeleton',
  data() {
    return {
      list: [
        {
          imgUrl:
            'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          previewUrl: [
            'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
          ],
          name: 'Interstellar',
          content: 'Love is the one thing that transcends time',
          currentDate: '2021-06-21'
        },
        {
          imgUrl:
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          previewUrl: [
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
          ],
          name: 'Westworld',
          content: 'these violent delights have violent ends',
          currentDate: '2021-04-28'
        },
        {
          imgUrl:
            'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          previewUrl: [
            'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
          ],
          name: 'Steve Jobs',
          content: 'Stay Hungry Stay Foolish',
          currentDate: '2021-05-21'
        }
      ],
      loading: true,
      isAnimated: true
    }
  },
  mounted() {
    this.setLoading()
  },
  methods: {
    setLoading() {
      this.loading = true
      setTimeout(() => (this.loading = false), 2500)
    }
  }
}
</script>

<style lang='scss' scoped>
$width: 100%;
$border-radius: 4px;
.skeleton {
  width: $width;
  .skeleton-image {
    width: $width;
    height: 240px;
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    object-fit: cover;
  }
  .skeleton-desc {
    justify-items: space-between;
  }
}

.skeleton-option {
  color: #515a6e;
  font-size: 14px;
  margin: 0 0 12px 0;
}

::v-deep .custom-style {
  .el-skeleton {
    display: flex;
    justify-content: space-between;
  }
  .custom-style-desc {
    padding: 16px 24px;
    span {
      color: #17233d;
    }
    p {
      margin: 8px 0 0 0;
      color: #808695;
      font-size: 14px;
    }
  }
}
</style>
